<template>
  <div class="changePwd-pages">
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="$router.push('/profile')"
    />
    <van-form @submit="onSubmit">
      <van-field autocomplete="off"
        clearable
        required
        v-model="account"
        name="account"
        label="手机号"
        placeholder="请输入手机号"
        maxlength="11"
        :rules="[
            {
              required: true,
              message: '请填写手机号',
            }
          ]"
      />
      <van-field autocomplete="off"
        clearable
        required
        v-model="password"
        type="password"
        name="password"
        label="当前密码"
        placeholder="请输入当前密码"
        :rules="[{ required: true, message: '请填写当前密码' }]"
      />
      <van-field autocomplete="off"
        clearable
        required
        v-model="new_password"
        type="password"
        name="new_password"
        label="新密码"
        placeholder="请输入新密码(6-20位)"
        :rules="[
          { required: true, message: '请填写新密码' },
          { pattern, message: '密码只能输入6-20位' },
          {
                  validator: value => {
                    return wordCountLimit(value, 20)
                  },
                  message: '密码只能输入6-20位'
          }
        ]"
      />
      <van-field autocomplete="off"
        clearable
        v-model="confirm_new_password"
        type="password"
        required
        name="confirm_new_password"
        label="确认新密码"
        placeholder="请再次输入新密码(6-20位)"
        :rules="[
          { required: true, message: '请再次填写新密码' },
          { pattern, message: '密码只能输入6-20位' },
          {
                  validator: value => {
                    return wordCountLimit(value, 20)
                  },
                  message: '密码只能输入6-20位'
          }
        ]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交修改
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import {Toast} from 'vant';
  export default {
    name: 'changePwd',
    data() {
      return {
        pattern: /^.{6,20}$/,
        account:'',
        password: '',
        new_password: '',
        confirm_new_password: '',
      }
    },

    methods: {
      // 校验输入内容的字长
      wordCountLimit(val, wordCount) {
        return 6 <= val.length <= wordCount
      },

      formatter(value){

      },
      onSubmit(values){
        const {account,password,new_password, confirm_new_password}=values;
        if (new_password != confirm_new_password){
          Toast('新密码前后不一致')
          return
        } else if(new_password.length <6 || new_password.length>20){
          Toast('密码长度不符合规则, 新密码应在6-20位之间');
          return
        }
        const params = {
          account,
          password: this.$Base64.encode(this.$md5(password) + this.$md5('jinpin888')),
          new_password: this.$Base64.encode(this.$md5(new_password) + this.$md5('jinpin888')),
        };
        /*
        const res = await this.$api.user.reqUpdatePsd(params)
        if(res.code===200){
          Toast(res.data)
          // 清除登录信息, 重新登录
          this.$store.dispatch('logOut')
          this.$router.push('/login')
        }
        */
        this.$api.user.reqUpdatePsd(params).then(res =>{
          if(res.code===200){
            Toast(res.data)
            // 清除登录信息, 重新登录
            this.$store.dispatch('logOut')
            this.$router.push('/login')
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .changePwd-pages{
    width: 100%;
  }

</style>
